<template>
   <el-container>
	  <el-main>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </el-main>
	  <el-footer>
      <el-row>
        <el-col :span="6">
          <router-link to="Home">
            <i class="el-icon-s-home"></i>
            <span>主页</span>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="Product">
            <i class="el-icon-s-help"></i>
            <span>产品</span>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="Shopcar">
            <i class="el-icon-s-shop"></i>
            <span>购物车</span>
           </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="Mine">
            <i class="el-icon-user-solid"></i>
            <span>我的</span>
          </router-link>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'total',
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>

.el-main{
  padding:0;
}
.el-footer{
  padding:0;
  background-color:#fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  .el-row{
    height: 100%;
    .el-col{
      height:100%;
      display: flex;
      justify-content: center;
      align-items: center;
      a{
        display: block;
        color:black;
        text-decoration: none;
        font-weight:bold;
        i,span{
          display: block;
          text-align: center;
        }
        i{
          font-size:22px;
        }
        span{
          font-size:12px;
        }
        &.router-link-active{
          i,span{
            color:rgb(255,138,69);
          }
        }
      }
    }
  }
}
</style>
